<template>
  <el-card class="app-container">
    <div v-if="!showDetail">
      <div class="itemTitle">绩效考核结果</div>
      <div class="search">
        <el-form
          :model="queryForm"
          :inline="true"
        >
          <el-row>
            <el-col :span="5">
              <el-form-item label="考核任务：">
                <el-select
                  v-model="queryForm.checkId"
                  clearable
                  value-key="id"
                  placeholder="请选择考核分类"
                  @change="selectCheckType"
                >
                  <el-option
                    v-for="item in checkTypeList"
                    :key="item.id"
                    :label="item.task_name"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="被考核人：">
                <el-select
                  v-model="uid"
                  clearable
                  placeholder="请选择被考核人"
                  @change="selectCheckTypeBy"
                >
                  <el-option
                    v-for="item in listBy"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item>
                <el-button type="primary" @click="searchAssessment">搜索</el-button>
                  <el-button @click="reset">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="content">
        <div class="ct-table-only">
          <elTables
            isPagin
            :tableData="listTableData"
            :columns="columns"
            :curHeight="tableHeight"
            :currentPage="currentPage"
            :pageSize="pageSize"
            :totalLength="totalLength"
            :handleCurrentChange="handleCurrentChange"
          ></elTables>
        </div>
      </div>
    </div>
    <div v-if="showDetail" class="page-edit">
      <header>
        <i style="font-size: 18px; cursor: pointer; margin-right: 8px" class="el-icon-arrow-left" @click="goBack"></i>
        <span>考核详情</span>
      </header>
      <section class="edit-body">
        <div class="form-page">
          <el-form
            label-width="120px"
          >
            <el-col :span="8">
              <el-form-item label="目标名称：">
                <el-input
                  class="searchInput"
                  v-model="tianbaoObj.task_name"
                  style="width: 100%"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="考核部门：">
                <el-input
                  class="searchInput"
                  :value="
                    Array.isArray(tianbaoObj.dept_name) &&
                    tianbaoObj.dept_name.length > 0
                      ? tianbaoObj.dept_name.join('/')
                      : ''
                  "
                  style="width: 100%"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="截止时间：">
                <el-input
                  class="searchInput"
                  v-model="tianbaoObj.limitTime"
                  style="width: 100%"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="考核任务说明：">
                <el-input
                  type="textarea"
                  class="searchInput"
                  :value="tianbaoObj.note"
                  disabled
                  :rows="3"
                  style="width: 100%"
                ></el-input>
              </el-form-item>     
            </el-col>
        </el-form>
        </div>
        <div class="form-page">
          <p class="title-level2">考核项目</p>
          <div style="display: flex">
            <div style="flex:1;">
              <p>
                <span>总分：45分</span>
                <span>得分：45分</span>
              </p>
              <el-table
                :data="tianbaoTableData"
                style="width: 100%; margin-bottom: 20px"
                row-key="id"
                border
                default-expand-all
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
              >
                <el-table-column
                  prop="aimAndKeyPoint"
                  label="考核目标及要点"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="score"
                  label="分值"
                  width="50px"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="standard"
                  label="评价标准说明"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="koufen"
                  label="扣分"
                  align="center"
                  width="130px"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <template
                      v-if="
                        isLookItem &&
                        scope.row.children &&
                        scope.row.children.length > 0
                      "
                    >
                      {{
                        scope.row.minusScore > scope.row.score
                          ? scope.row.score
                          : scope.row.minusScore
                      }}
                      <!-- {{scope.row.minusScore}} -->
                    </template>
                    <template v-else-if="isLookItem">
                      <el-input-number
                        v-model="scope.row.minusScore"
                        size="small"
                        controls-position="right"
                        :min="0"
                        @change="change(scope)"
                        style="width: 100px"
                      ></el-input-number>
                    </template>
                    <template v-else>
                      {{ scope.row.minusScore }}
                    </template>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="defen"
                  label="得分"
                  align="center"
                  width="50"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <template
                      v-if="scope.row.children && scope.row.children.length > 0"
                    >
                      {{ scope.row.realScore }}
                    </template>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div id="container" style="width: 48vw; height: 400px"></div>
          </div>
        </div>
      </section>
    </div>
    <!-- <div v-if="showDetail">
      <div slot="header" class="clearfix">
          <span>各考评项评分列表</span>
      </div>
      <div>
          <el-table
              :data="tableData"
              style="width: 100%;margin-bottom: 20px;"
              row-key="id"
              border
              default-expand-all
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          >
              <el-table-column prop="project" label="评定项目"></el-table-column>
              <el-table-column prop="quanzhong" label="权重"></el-table-column>
              <el-table-column prop="addQuan" label="加权分值"></el-table-column>
              <el-table-column prop="desc" label="考核说明"></el-table-column>
              <el-table-column prop="descXX" label="详细考核记录"></el-table-column>
              <el-table-column prop="score" label="得分"></el-table-column>
          </el-table>
      </div>
    </div> -->
  </el-card>
</template>

<script>
import echarts from "echarts"
import { getParentList } from "@/api/safetyPerformance"

import {
  addSafeTask,
  searchSafeTaskList,
  searchTaskItem,
  removeTask,
  getParent,
  submitTaskItem,
  getBiaoZhun,
} from "@/api/safetyTask"
export default {
  data() {
    return {
      tableHeight:0,
      showDetail:false,
      myChart: null,
      uid: null,
      listBy: [],
      listTableData: [
        {1:'测试数据'}
      ],
      tianbaoObj: {},
      queryForm: {},
      currentPage:1,
      pageSize:10,
      totalLength:0,
      messageColumns: [
        { key: "evaluate", title: "评定大项" },
        { key: "score", title: "加权后得分" },
        {
          key: "scoreBai",
          title: "百分制得分",
          render: (h, params) => {
            return h("div", [
              h(
                "el-tag",
                {
                  props: {
                    effect: "dark",
                    type:
                      params.row.scoreBai == "60.00" ? "warning" : "success",
                  },
                },
                params.row.scoreBai
              ),
            ])
          },
        },
      ],
      messageTableData: [
        {
          evaluate: "目标职责",
          score: 4,
          scoreBai: "80.00",
        },
        {
          evaluate: "制度化管理",
          score: 8,
          scoreBai: "80.00",
        },
        {
          evaluate: "教育培训",
          score: 9,
          scoreBai: "90.00",
        },
        {
          evaluate: "现场管理",
          score: 6,
          scoreBai: "60.00",
        },
        {
          evaluate: "风险管理",
          score: 10,
          scoreBai: "100.00",
        },
        {
          evaluate: "隐患排查治理",
          score: 8,
          scoreBai: "80.00",
        },
        {
          evaluate: "应急管理",
          score: 4,
          scoreBai: "80.00",
        },
        {
          evaluate: "事故情况",
          score: 8,
          scoreBai: "80.00",
        },
        {
          evaluate: "系统使用情况",
          score: 28,
          scoreBai: "93.33",
        },
      ],
      isLookItem: true, //查看详情显示不同的内容
      columns:[
        {key:'1',title:'考核任务'},
        {key:'2',title:'考核类别'},
        {key:'3',title:'考核部门'},
        {key:'4',title:'责任人'},
        {key:'5',title:'被考核人'},
        {key:'6',title:'考核时间'},
        {key:'7',title:'截止日期'},
        {key:'8',title:'总分'},
        {key:'9',title:'所属公司'},
        {
          title: "操作",
          align: "center",
          fixed:'right',
          width: 80,
          render: (h, params) => {
            return h("div", [
              h(
                "el-button",
                {
                  props: {
                    type: "text",
                    size: "small",
                  },
                  on: {
                    click: () => {
                      this.handleShowDetail(params.row);
                    },
                  },
                },
                "查看"
              ),
            ]);
          },
        },
      ],
      tableData: [
        {
          id: 1,
          project: "目标职责",
          quanzhong: "5%",
          addQuan: "5",
          desc: "",
          descXX: "",
          score: "4",
          children: [
            {
              id: 1 - 1,
              project: "安全投入达标率",
              quanzhong: "2%",
              addQuan: "2",
              desc: "合格率大于20%:2分;合格率18%~20%:1分;合格率小于18%:0分;",
              descXX:
                "年合格率大于20%:2分;合格率18%~20%:1分;合格率小于18%:0分;(-1)分",
              score: "1",
            },
            {
              id: 1 - 2,
              project: "安全预算未执行率",
              quanzhong: "3%",
              addQuan: "3",
              desc: "未检验率大于20%:0分;未检验率18%~20%:2分;未检验率小于18%:3分;",
              descXX:
                "年未检验率大于20%:0分;未检验率18%~20%:2分;未检验率小于18%:3分;(3)分",
              score: "3",
            },
          ],
        },
        {
          id: 2,
          project: "制度化管理",
          quanzhong: "10%",
          addQuan: "10",
          desc: "",
          descXX: "",
          score: "8",
        },
      ],
      //考核任务
      checkTypeList: [],
    }
  },
  mounted(){
    this.$nextTick(() => {
      this.getTableHeight();
    })
    this._getParentList()
    this.getEchart()
  },
  methods: {
    goBack() {
      this.showDetail=false;
    },
    handleShowDetail(row){
      this.showDetail=true;
    },
    handleCurrentChange(val){
      this.currentPage=val;
    },
    getTableHeight(){
      let height=document.getElementsByClassName('ct-table-only')[0].clientHeight;
      console.log('height',height)
      this.tableHeight= height;
    },
    _getParentList() {
      let params = {}
      params.current = 1
      params.size = 100000
      searchSafeTaskList(params).then((res) => {
        console.log("搜索", res)
        if (res.code == "00x0") {
          this.checkTypeList = res.data.records
        }
      })
    },
    //考核标准选择
    selectCheckType(e) {
      this.looktianbaoItem(e)
      this.listBy = []
      this.tianbaoTableData = []
      e.assessPersonId.forEach((val, index) => {
        this.listBy.push({ id: val, name: e.assessPersonName[index] })
      })
      this.getInfo(e)
    },
    selectCheckTypeBy(e) {
      this.tianbaoTableData = []
      this.getInfo(e)
    },
    searchAssessment() {},
    reset() {
      this.queryForm = {}
      this.uid = undefined
      this.tianbaoObj={}
      this.tianbaoTableData=[]
    },
    // 查看填报详情
    looktianbaoItem(params) {
      this.tianTitle = "考核任务详情"
      this.zongCount = 0
      this.tianbaoDialog = true
      this.isLookItem = false
      this.tianbaoObj = JSON.parse(JSON.stringify(params))
    },
    getInfo(uid) {
      if (!this.tianbaoObj.id || !this.uid) {
        return
      }
      searchTaskItem({ taskId: this.tianbaoObj.id, uid: this.uid }).then(
        (res) => {
          console.log("查询任务表", res)
          if (res.code == "00x0") {
            this.tianbaoTableData = res.data
            this.updatedEchart()
            for (let i = 0; i < res.data.length; i++) {
              //   if (
              //     params.status == 1 ||
              //     params.status == 3 ||
              //     params.status == 4
              //   ) {
              //     this.zongCount = "____"
              //   } else {
              this.zongCount += res.data[i].realScore
              //   }
            }
          }
        }
      )
    },
    getEchart() {
      let dom = document.getElementById("container")
      this.myChart = echarts.init(dom)
      let option = {
        legend: {
          // data: ['绩效考核任务表']
        },
        grid: {
          top: "0%",
          left: "0%",
          bottom: "1%",
          right: "1%",
          containLabel: true,
        },
        radar: {
          // shape: 'circle',
          indicator: [],
        },
        series: [
          {
            name: "绩效考核任务表",
            type: "radar",
            data: [
              {
                value: [],
              },
            ],
            lineStyle: {
              color: "red",
            },
          },
        ],
      }

      if (option && typeof option === "object") {
        this.myChart.setOption(option)
      }
    },
    //更新图表
    updatedEchart() {
      const indicator = []
      this.tianbaoTableData.forEach((item) => {
        indicator.push(
          Object.assign(
            {},
            {
              name: item.aimAndKeyPoint,
              max: item.score,
            }
          )
        )
      })
      const values = this.tianbaoTableData.map((item) => {
        return item.realScore
      })
      var option
      option = {
        legend: {
          // data: ['绩效考核任务表']
        },
        radar: {
          // shape: 'circle',
          indicator: indicator,
        },
        series: [
          {
            name: "绩效考核任务表",
            type: "radar",
            data: [
              {
                value: values,
              },
            ],
            lineStyle: {
              color: "red",
            },
          },
        ],
      }
      if (option && typeof option === "object") {
        this.myChart.setOption(option)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.box-card {
  overflow: auto;
}
.edit-body{
  display:flex;
  flex-direction: column;
}
</style>